<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
        <title>美食每客</title>
        <link rel="icon" href="./../images/favico.ico">
        <!--不同屏幕尺寸根字体设置-->
        <script src="./../js/base.js"></script>
        <!--element-ui的样式-->
        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
        <!--引入vant样式-->
        <link rel="stylesheet" href="../styles/vant.min.css"/>
        <!-- 引入样式  -->
        <link rel="stylesheet" href="../styles/index.css" />
        <!--本页面内容的样式-->
        <link rel="stylesheet" href="./../styles/add-order.css" />
    </head>
    <body>
        <div id="add_order" class="app">
            <div class="divHead">
                <div class="divTitle">
                    <i class="el-icon-arrow-left" @click="goBack"></i>美食每客
                </div>
            </div>
            <div class="divContent">
                <div class="divAddress">
                    <div @click="toAddressPage">                    
                        <div class="address">{{address.detail}}</div>
                        <div class="name">
                            <span>{{address.consignee}}{{address.sex === '1' ? '先生':'女士'}}</span>
                            <span>{{address.phone}}</span>
                        </div>
                        <i class="el-icon-arrow-right"></i>
                    </div>
                    <div class="divSplit"></div>
                    <div class="divFinishTime">预计{{finishTime}}送达</div>
                </div>
                <div class="order">
                    <div class="title">订单明细</div>
                    <div class="divSplit"></div>
                    <div class="itemList">
                        <div class="item" v-for="(item,index) in cartData" :key="index">
                            <el-image :src="imgPathConvert(item.image)">
                                <div slot="error" class="image-slot">
                                    <img src="./../images/noImg.png"/>
                                </div>
                            </el-image>
                            <div class="desc">
                                <div class="name">{{item.name}}</div>
                                <div class="numPrice">
                                    <span class="num">x{{item.number}}</span>
                                    <div class="price">
                                        <span class="spanMoney">￥</span>{{item.amount}}</div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
                <div class="order">
                    <el-button type="warning"  icon="el-icon-s-ticket" size="mini" @click="handleClose1">请选择使用的优惠劵</el-button>

                </div>
                <div class="order">
                    <div class="title">所使用的优惠卷</div>
                    <div class="divSplit"></div>
                    <div class="itemList">
                        <div class="item">
                            <div class="desc" v-if="see">
                                <div class="name">{{form.couponType == '0' ? '直减现金券' : '满减现金券'}}</div>
                                <div class="numPrice">
                                    <span class="num">优惠卷编号{{form.couponTempId}}</span>
                                    <span class="num">满{{form.fullAmount}}减{{form.couponAmount}}</span>
                                    <div class="price">
                                        <span class="spanMoney">￥</span>{{form.couponAmount}}</div>
                                </div>
                            </div>
                                <div v-else>
                                    Not使用的优惠卷
                                </div>



                        </div>
                    </div>
                </div>
                <div class="note">
                    <div class="title">备注</div>
                    <van-field
                        v-model="note"
                        rows="2"
                        autosize
                        type="textarea"
                        maxlength="50"
                        placeholder="请输入您需要备注的信息"
                        show-word-limit
                    />
                </div>

            </div>
            <div class="divCart">
                <div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}"></div>
                <div :class="{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}" v-if="cartData && cartData.length > 0">{{ goodsNum }}</div>
                <div class="divNum">
                    <span>￥</span>
                    <span>{{goodsPrice}}</span>
                </div>
                <div class="divPrice"></div>
                <div :class="{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}" @click="goToPaySuccess">去支付</div>
              </div>
            <el-dialog
                    title="我的优惠券"
                    :visible.sync="dialogVisible1"
                    width="100%">


                <div class="coupon"v-for="coupon in myCoupons">
                    <div class="coupon_text">
                        {{coupon.couponType == '0' ? '直减现金券' : '满减现金券'}}
                        <div>￥{{coupon.couponAmount}}</div>
                        <!--                <b>￥{{coupon.couponAmout}}</b>-->

                        <div v-if="coupon.couponType == '1'">满{{coupon.fullAmount}}减{{coupon.couponAmount}}</div>
                        <div>截止期限：{{coupon.effectiveEndTime}}</div>
                    </div>
                    <div class="coupon_btn" @click="handcose(coupon)">
                        <span>立即使用</span>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>
        </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="../../backend/plugins/vue/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../../backend/plugins/element-ui/index.js"></script>
        <!-- 引入vant样式 -->
        <script src="./../js/vant.min.js"></script>      
        <script src="./../api/address.js"></script>
        <!-- 引入axios -->
        <script src="../../backend/plugins/axios/axios.min.js"></script>
        <script src="./../js/request.js"></script>
        <script src="./../js/common.js"></script>
        <script src="./../api/main.js"></script>
        <script src="./../api/order.js"></script>
        <script>
            new Vue({
                el:"#add_order",
                data(){
                    return {
                        see:false,
                        form: {
                            id:'',
                            userId:'',
                            couponTempId:'',
                            couponType:'',
                            codeNo:'',
                            couponAmout:'',
                            fullAmount:'',
                            effectiveStartTime: '',
                            effectiveEndTime: '',
                            status:'',
                            useTime:''

                        },
                        myCoupons:[],
                        dialogVisible1: false,
                        address:{
                            phone:'',//手机号
                            consignee:'',//姓名
                            detail:'',//详细地址
                            sex:'1',
                            id:undefined
                        },
                        finishTime:'',//送达时间
                        cartData:[],
                        note:''//备注信息
                    }
                },
                computed:{
                    goodsNum(){
                        let num = 0
                        this.cartData.forEach(item=>{
                            num += item.number 
                        })
                        if(num <99){
                            return num
                        }else{
                            return '99+'
                        }
                    },
                    goodsPrice(){
                        let couponAmount = this.form.couponAmount
                        let fullAmount = this.form.fullAmount
                        let price = 0
                    this.cartData.forEach(item=>{
                        price += (item.number * item.amount)
                    })
                        if(fullAmount == ''){
                            return price
                        }
                        if(price >= fullAmount){
                            console.log(1)
                            return price-couponAmount
                        }
                        else{
                            this.$notify({ type:'warning', message:'不到满减金额'});
                            this.form = ''
                            this.see = false
                            console.log(2)
                            return price
                        }


                    }
                },
                created(){
                    this.initData()
                },
                mounted(){},
                methods:{
                    handcose(coupon){
                        this.see = true
                        this.dialogVisible1 = false
                      this.form=coupon
                    },
                    handleClose1(coupon) {
                        this.dialogVisible1 = true
                    },
                    goBack(){
                        history.go(-1)
                    },
                    initData(){
                        //获取默认的地址
                        this.defaultAddress()
                        //获取购物车的商品
                        this.getCartData()
                        //获取我的优惠卷
                        this.getMyCoupons()
                    },
                    async getMyCoupons(){
                        const res = await  getMyCouponsApi()
                        //获取优惠卷数据
                        if(res.code === 1){
                            this.myCoupons = res.data
                        }else{
                            this.$notify({ type:'warning', message:res.msg});
                        }
                    },
                    //获取默认地址
                    async defaultAddress(){
                        const res = await  getDefaultAddressApi()
                        if(res.code === 1){
                           this.address = res.data
                           this.getFinishTime()
                        }else{
                            window.requestAnimationFrame(()=>{
                                window.location.href = '/front/page/address-edit.html'
                            })
                        }
                    },
                    //获取送达时间
                    getFinishTime(){
                        let now = new Date()
                        let hour = now.getHours() +1
                        let minute = now.getMinutes()
                        if(hour.toString().length <2){
                            hour = '0' + hour
                        }
                        if(minute.toString().length <2){
                            minute = '0' + minute
                        }
                        this.finishTime = hour + ':' + minute
                    },
                    toAddressPage(){
                        window.requestAnimationFrame(()=>{
                            window.location.href = '/front/page/address.html'
                        })
                    },
                    //获取购物车数据
                    async getCartData(){
                        const res = await cartListApi({})
                        if(res.code === 1){
                            this.cartData = res.data
                        }else{
                            this.$notify({ type:'warning', message:res.msg});
                        }
                    },
                    async goToPaySuccess(){
                        const params = {
                            remark:this.note,
                            payMethod:1,
                            addressBookId:this.address.id,
                            couponUserId:this.form.id
                        }
                        const res = await addOrderApi(params)
                        if(res.code === 1){
                            window.requestAnimationFrame(()=>{
                                window.location.replace('/front/page/pay-success.html')
                            })
                        }else{
                            this.$notify({ type:'warning', message:res.msg});
                        }
                    },
                    //网络图片路径转换
                    imgPathConvert(path){
                        return imgPath(path)
                    },
                }
            })
            </script>
        </body>
    <style>
        .coupon {
            width: 100%;
            height: 80px;
            padding: 0 10px;
            background: -webkit-linear-gradient(left, #d34b5a, #c64765);
            background: -o-linear-gradient(left, #d34b5a, #c64765);
            background: -moz-linear-gradient(left, #d34b5a, #c64765);
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
        }
        .coupon_text {
            flex: 2;
            color: white;
            font-size: 14px;
            position: relative;
        }
        .coupon_text > b {
            font-size: 14px;
        }
        .coupon_text > div {
            font-size: 12px;
        }
        .coupon_btn {
            border: none;
            height: 110px;
            line-height: 110px;
        }
        .coupon_btn > span {
            background: -webkit-linear-gradient(top, #fae8e9, #f2a799);
            background: -o-linear-gradient(top, #fae8e9, #f2a799);
            background: -moz-linear-gradient(top, #fae8e9, #f2a799);
            padding: 5px 10px;
            vertical-align: middle;
            font-size: 12px;
            border-radius: 30px;
            color: #E41F19;
            　　　　}
    </style>
    </html>